<template>
  <div>
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column type="expand">
        <!-- 这里是展开的详细信息 -->
        <template #default="props">
          <h4>详细信息</h4>
          <el-row>
            <el-col :span="12">
              <p m="t-0 b-2">账号名: {{ props.row.userName }}</p>
              <p m="t-0 b-2">昵称: {{ props.row.nickName }}</p>
              <p m="t-0 b-2">性别: {{ props.row.sex }}</p>
              <p m="t-0 b-2">年龄: {{ props.row.age }}</p>
            </el-col>
            <el-col :span="12">
              <p m="t-0 b-2">手机号: {{ props.row.phone }}</p>
              <p m="t-0 b-2">地区: {{ props.row.area }}</p>
              <p m="t-0 b-2">vip: {{ props.row.vip }}</p>
              <p m="t-0 b-2">积分: {{ props.row.points }}</p>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column v-if="idShow" sortable label="id" prop="id" />
      <el-table-column sortable label="注册时间" prop="createTime" />
      <el-table-column sortable label="账号名" prop="userName" />
      <el-table-column sortable label="昵称" prop="nickName" />
      <el-table-column sortable label="性别" prop="sex" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="searchMsg" size="medium" placeholder="输入昵称或电话号码" @keyup.enter.native="searchUser()" />
        </template>

        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <nav v-if="total * 1" style="text-align: -webkit-center">
      <el-pagination :total="total" :page-size="pageSize" :current-page="pageNum" :page-sizes="pageSizes"
        layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </nav>

    <div>
      <el-dialog title="修改信息" :visible.sync="centerDialogVisible" width="50%" center>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="昵称">
                <el-input v-model="form.nickName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="form.sex" placeholder="请选择性别">
                  <el-option label="男" value="0" />
                  <el-option label="女" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄">
                <el-input v-model="form.age" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="手机号">
                <el-input v-model="form.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地区">
                <el-input v-model="form.area" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="vip">
                <el-input v-model="form.vip" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="积分">
                <el-input v-model="form.points" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmForm()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  updateUserInfo,
  delUserInfo,
  selectUserInfo
} from '@/api/admin'
import { Message } from 'element-ui'
export default {
  name: 'BossManagement',
  data() {
    return {
      pageSizes: [10, 20, 50, 100], // 分页下拉框选项
      userType: '2',
      searchMsg: '',
      idShow: false,
      pageSize: 4,
      pageNum: 1,
      total: 0,
      centerDialogVisible: false,
      filterTableData: [],
      // 编辑表单
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      form: {}
    }
  },
  created() {
    const p = {
      pageSize: this.pageSize,
      pageNum: this.pageNum,
      userType: this.userType
    }
    selectUserInfo(p).then((response) => {
      if (response.data.code === 200) {
        this.filterTableData = response.data.data.rows
        this.filterTableData.forEach((e) => {
          if (e.status === '0') e.status = '正常'
          else if (e.status === '1') e.status = '禁用'
          if (e.sex === '0') e.sex = '男'
          else if (e.sex === '1') e.sex = '女'
          else if (e.sex === '2' || e.sex === null) e.sex = '未知'
        })
        this.total = parseInt(response.data.data.total)
      }
    })
  },
  methods: {
    getList() {
      const p = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        userType: this.userType
      }
      selectUserInfo(p).then((response) => {
        if (response.data.code === 200) {
          this.filterTableData = response.data.data.rows
          this.filterTableData.forEach((e) => {
            if (e.status === '0') e.status = '正常'
            else if (e.status === '1') e.status = '禁用'
            if (e.sex === '0') e.sex = '男'
            else if (e.sex === '1') e.sex = '女'
            else if (e.sex === '2' || e.sex === null) e.sex = '未知'
          })
          this.total = parseInt(response.data.data.total)
        }else if(response.data.code === 516){
          // 置空
          this.filterTableData = []
        }
      })
    },
    handleEdit(index, row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.centerDialogVisible = true
    },

    // 修改用户信息
    // 修改前验证
    validate() {
      const phoneRegx =
        /^1[3-9]\d{9}$/
      return phoneRegx.test(this.form.phone)
    },
    confirmForm() {
      if (this.validate()) {
        updateUserInfo(this.form).then((response) => {
          if (response.data.code === 200) {
            console.log(response.data.data)
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 5 * 1000
            })
            this.pageNum = 1
            this.getList()
          }
        })
        this.centerDialogVisible = false
      } else {
        Message({
          message: '手机号格式不正确',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },

    // 删除用户
    handleDelete(index, row) {
      delUserInfo(row.id).then((response) => {
        if (response.data.code === 200) {
          Message({
            message: response.data.msg,
            type: 'success',
            duration: 5 * 1000
          })
          this.pageNum = 1
          this.getList()
        }
      })
    },

    // 搜索用户
    searchUser() {
      const phoneRegx = /^1[3-9]\d{9}$/
      if (phoneRegx.test(this.searchMsg)) {
        let parmas = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          phoneNumber: this.searchMsg,
          userType: '2'
        }
        selectUserInfo(parmas).then((response) => {
          if (response.data.code === 200) {
            this.filterTableData = response.data.data.rows
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 5 * 1000
            })
          } else if (response.data.code === 516) {
            this.filterTableData = response.data.data
            Message({
              message: response.data.msg,
              type: 'warning',
              duration: 5 * 1000
            })
          }
        })
      } else {
        var parma = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          nickName: this.searchMsg,
          userType: '2'
        }
        selectUserInfo(parma).then((response) => {
          if (response.data.code === 200) {
            this.filterTableData = response.data.data.rows
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 5 * 1000
            })
          } else if (response.data.code === 516) {
            this.filterTableData = response.data.data
            Message({
              message: response.data.msg,
              type: 'warning',
              duration: 5 * 1000
            })
          }
        })
      }
    },
    // 更换一页显示的数目
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getList()
    },
  }
}
</script>
<style scoped>
::v-deep .el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: bold;
  margin-top: 2rem;
}
</style>
